<template>
  <div>
    <button @click="obj.height = 195">修改height</button>
    <p>{{ obj.name }} -- {{ obj.age }} -- {{ obj.height }}</p>

    <!-- <button @click="list[0] = 999" >修改下标0的数据</button> -->

    <button @click="$set(list, 0, 999)">修改下标0的数据</button>
    <!-- <button @click="list.length = 2">修改数组长度</button> -->
    <button @click="list.splice(2)">修改数组长度</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "jack",
        age: 16,
      },

      list: [1, 2, 3, 4, 5, 6],
    };
  },

  created() {
    // 对象是可以动态添加属性的
    // 动态添加的属性，它不是响应式的
    // 响应式：是指数据发生改变，界面会自动更新
    // this.obj.height = 175

    // 给obj添加了height属性，值为175
    this.$set(this.obj, "height", 175);
  },
};
</script>

<style>
</style>